<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong> {{ letCount }} </strong></span>
    <ul class="filters">
      <li>
        <!-- type改变成all -->
        <a  @click="$emit('changeType','all')" :class="{ selected: type === 'all' }" href="javascript:;" >全部</a>
      </li>
      <li>
        <!-- type改变成no -->
        <a  @click="$emit('changeType','no')" :class="{ selected: type === 'no' }" href="javascript:;">未完成</a>
      </li>
      <li>
        <!-- type改变成yes -->
        <a @click="$emit('changeType','yes')" :class="{ selected: type === 'yes' }" >已完成</a>
      </li>
    </ul>
    <button class="clear-completed" v-if="isShowClear" @click="clear">清除已完成</button>
  </footer><!-- 定义isShowClear筛选。返回对应的 -->
</template>

<script>
export default {
props: {
  list: {
    type: Array,
    required: true,
  },
  type:String
},
computed: {
  letCount() {
    // 统计未完成的任务数量
    return this.list.filter(item => item.isDone === false).length
  },
  isShowClear(){
    console.log(this.list);
    /* 通过some筛选 */
    return this.list.some(item => item.isDone)
  },
  
},
methods: {
  clear() {
     /* 触发父组件定义事件 */
    this.$emit('clear')
  }
}
}
</script>

<style>

</style>